<template>
  <div class="pages">
    <div class="display-area">
      <div class="display-area-slot">
        <slot> </slot>
      </div>
      <div class="showBtn">
        <div class="showBtn-icon" @click="openAndCloseCode">
          <el-tooltip
            :show-arrow="false"
            :content="isShow ? '隐藏源代码' : '查看源代码'"
            effect="dark"
            placement="bottom-end"
          >
            <el-icon>
              <Reading />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>

    <transition
      name="slide"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div v-show="isShow">
        <pre style="margin: 0">
            <code class="language-js line-numbers" style="padding-top: 0;">{{sourceCode}}</code>
        </pre>
        <div class="closeCode" @click="openAndCloseCode">
          <el-icon>
            <CaretTop />
          </el-icon>
          <span>隐藏源代码</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import Prism from "prismjs";
const { showpath } = useAttrs();

const sourceCode = ref();

onMounted(async () => {
  const isDev = import.meta.env.MODE === "development";
  let path = showpath || "";
  if (isDev) {
    /* @vite-ignore */
    const data = await import(
      /* @vite-ignore */ `/src/views/${path}.vue?raw`
    );
    sourceCode.value = data.default;
  } else {
    sourceCode.value = await fetch(`./views/${path}.vue`).then((res) =>
      res.text()
    );
  }
  await nextTick(() => {
    Prism.highlightAll();
  });
});
const isShow = ref(false);

// 展开控制
const openAndCloseCode = () => {
  isShow.value = !isShow.value;
};
const beforeLeave = (el) => {
  // 给元素设置过渡效果
  el.style.transition = "0.3s height ease-in-out";
  // 高度变化时，让其内容隐藏
  el.style.overflow = "hidden";
};
const leave = (el) => {
  el.style.height = "auto";
  // 设置高度为具体的值
  el.style.height = window.getComputedStyle(el).height;
  // 强制浏览器回流，否则浏览器会合并两次元素的高度更改
  el.offsetHeight;
  el.style.height = "0px";
};
const afterLeave = (el) => {
  // 收尾工作，展示完过渡效果之后，设为原来的值
  el.style.transition = "";
  el.style.overflow = "visible";
};
const beforeEnter = (el) => {
  // 给元素设置过渡效果
  el.style.transition = "0.3s height ease-in-out";
  // 高度变化时，让其内容隐藏
  el.style.overflow = "hidden";
};
const enter = (el) => {
  el.style.height = "auto";
  // 保存元素原来的高度
  const endWidth = window.getComputedStyle(el).height;
  el.style.height = "0px";
  // 强制浏览器回流，否则浏览器会合并两次元素的高度更改
  el.offsetHeight;
  el.style.height = endWidth;
};
const afterEnter = (el) => {
  // 收尾工作，展示完过渡效果之后，设为原来的值
  el.style.transition = "";
  el.style.overflow = "visible";
};
</script>

<style lang="scss" scoped>
.pages {
  margin-bottom: 20px;
}
.display-area {
  margin: 10px 0;
  margin-bottom: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  &-slot {
    padding: 10px;
  }
}
pre[class*="language-"]:before,
pre[class*="language-"]:after {
  display: none !important;
}
.showBtn {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #dcdfe6;
  padding: 0 15px;
  &-icon {
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
  }
}

.closeCode {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
        cursor: pointer;
    }
}
</style>
